import React, { useState } from 'react'
import styles from './index.module.less'
import { Form, Input, Button, message } from 'antd'
import { useUserStore } from '@/store/user'
import { ILoginData } from '@/types/login'
import { useNavigate } from 'react-router-dom'
import { UserOutlined, LockOutlined } from '@ant-design/icons'

const Login: React.FC = () => {
  const [loading, setLoading] = useState(false)
  const { login } = useUserStore(state => state)
  const naviagte = useNavigate()

  const onFinish = (values: ILoginData) => {
    setLoading(true)
    login(values).then(() => {
      message.success('登录成功')
      naviagte('/')
      setLoading(false)
    })
  }
  return (
    <div className={styles.login}>
      <div className={styles.loginWrapper}>
        <div className={styles.title}>系统登录</div>
        <Form name='basic' onFinish={onFinish} initialValues={{ userName: 'JackMa', userPwd: '123456' }}>
          <Form.Item name='userName' rules={[{ required: true, message: '请输入用户名' }]}>
            <Input prefix={<UserOutlined />} />
          </Form.Item>

          <Form.Item name='userPwd' rules={[{ required: true, message: '请输入密码' }]}>
            <Input.Password prefix={<LockOutlined />} />
          </Form.Item>
          <Form.Item>
            <Button type='primary' block htmlType='submit' loading={loading}>
              登录
            </Button>
          </Form.Item>
        </Form>
      </div>
    </div>
  )
}

export default Login
